import { useTitle } from 'ahooks';
import React, { useCallback, useState } from 'react'
import { Form, SearchBar } from 'antd-mobile'
import style from './index.less';
import { history } from 'umi';
import ActionPanel from '@/components/action-panel';
import classnames from 'classnames';
import List from './.list'
import PriceArea from '@/components/jiagequjian';

interface kl{
    status:string;
}
const Caigou = () => {
    useTitle('我要卖货')

    const goodsList = [
        {
            id: '1',
            name: '韭菜花',
            number: '500斤',
            address: '全国',
            chandi: '重庆市巴南区',
            time: '2022-4-26',


        },
        {
            id: '2',
            name: '五原黄柿子',
            number: '300斤',
            address: '全国',
            chandi: '内蒙古巴彦淖尔市',
            time: '2020-05-06',
        },
        {
            id: '3',
            name: '采购商品',
            number: '450斤',
            address: '全国',
            chandi: '重庆市巴南区',
            time: '2022-4-26',

        },
        {
            id: '4',
            name: '红烧猪蹄子',
            number: '500斤',
            address: '全国',
            chandi: '重庆市巴南区',
            time: '2020-06-06',

        },
        {
            id: '4',
            name: '红烧猪蹄子',
            number: '500斤',
            address: '全国',
            chandi: '重庆市巴南区',
            time: '2020-07-06',
        },
        {
            id: '4',
            name: '红烧猪蹄子',
            number: '500斤',
            address: '全国',
            chandi: '重庆市巴南区',
            time: '2020-08-06',
        },
    ];
    const [searchValue, setSearchValue] = useState('');
    const [visible1, setVisible1] = useState<boolean>(false)
    const [active, setActive] = useState<string | null>(null);
    const [form] = Form.useForm();
    const handleInputChange = (value: string) => {
        setSearchValue(value)
        setTimeout(() => {
            onSearch(value)
        },500)
    }
    const onSearch = (value:any) => {
        console.log("SearchValue", value);
    }
    const onOk = useCallback(async () => {
        setActive(null);
    }, [])

    return (

        <div className={style.page}>
           
            <Form form={form} className={style['condition-warp']}>
                <div>
                    <SearchBar
                        placeholder='搜索'
                        onChange={handleInputChange}
                        value={searchValue}
                        className={style.search}
                    />
                </div>
                <div className={style['item-top']}>
                    <div className={classnames(style.condition, {
                        [style.active]: null !== active,
                    })}>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'1' === active}
                                onClick={() => {
                                    
                                    if ('1' === active) {
                                        setActive(null);
                                        setVisible1(true);
                                    } else {
                                        setActive('1');
                                    }
                                }}
                                onReset={() => {
                                    onOk();
                                }}
                                onOk={onOk}
                                panel={
                                    <div>
                                        <List  showSearch={true} />

                                    </div>
                                }
                            >
                                分类
                            </ActionPanel>
                        </div>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'2' === active}
                                onClick={() => {
                                    if ('2' === active) {
                                        setActive(null);
                                    } else {
                                        setActive('2');
                                    }
                                }}
                                onReset={() => {
                                    onOk();
                                }}
                                onOk={onOk}
                                panel={
                                    <div>
                                        <List />

                                    </div>
                                }
                            >
                                供应地
                            </ActionPanel>
                        </div>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'3' === active}
                                onClick={() => {
                                    if ('3' === active) {
                                        setActive(null);
                                    } else {
                                        setActive('3');
                                    }
                                }}
                                panel={
                                    <PriceArea/>
                                }
                            >
                                价格
                            </ActionPanel>
                        </div>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'4' === active}
                                onClick={() => {
                                    if ('4' === active) {
                                        setActive(null);
                                    } else {
                                        setActive('4');
                                    }
                                }}
                                onReset={() => {
                                    onOk();
                                }}
                                onOk={onOk}
                                panel={
                                    <div>
                                        <List />

                                    </div>
                                }
                            >
                                产地
                            </ActionPanel>
                        </div>
                    </div>
                </div>
            </Form>
                

            <div className={style.box}>
                {goodsList.map((item) => (
                    <div
                        key={item.id}
                        className={style['list-item']}
                        onClick={() => {
                            history.push('xiangqing?id=' + item.id);
                        }}
                    >
                        <div className={style.con}>

                            <div className={style['con-right']}>
                                <div className={style.title}>
                                    <div className={style['title-con']}>

                                    </div>
                                    <div className={style.date}>{ }</div>
                                </div>

                                <span>
                                    <span className={style.no}>求购中</span>
                                    <span className={style.name}>{item.name}</span>
                                    <span className={style.time}>{item.time}</span>

                                </span>

                                <div className={style.item}>
                                    <div className={style.note}>数量</div>
                                    <div>
                                        {item.number}
                                    </div>
                                </div>
                                <div className={style.item}>
                                    <div className={style.note}>发货地</div>
                                    <div>
                                        {item.address}

                                    </div>
                                </div>
                                <div className={style.item}>
                                    <div className={style.note}>产地</div>
                                    <div>
                                        {item.chandi}

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
                <div className={style.cut}>我也是有底线的</div>

            </div>
        </div>




    )
}
export default Caigou;


